<template>
  <div class="main">
    <a-space class="grid" direction="vertical" :size="16">
      <a-row justify="start" :gutter="12">
        <a-col :span="2"><a-input v-model="aboutMy.name" placeholder="宣传图配置名称" /></a-col>
        <a-col :span="2" class="row">
          <a-select v-model="aboutMy.status" placeholder="请选择配置图状态" allow-clear>
            <a-option :value="1">上架</a-option>
            <a-option :value="0">下架</a-option>
          </a-select>
        </a-col>
        <a-col :span="1" class="row"><a-button type="outline" @click="getList">查询</a-button></a-col>
      </a-row>


      <a-row justify="start">
        <a-space>
          <!--新增和删除组件 -->
        <a-col :span="1"><a-button type="primary" @click="add">新增</a-button></a-col>
        <a-col :span="1"><a-button type="outline" @click="deleteClick(null)" :disabled="selectList.length == 0" status="danger">删除</a-button></a-col>
        </a-space>
      </a-row>



      <!-- 表格区域 -->
     <a-table :scroll="scroll" :row-selection="selectList" 
              v-model:selectedKeys="selectList" :data="data"
              row-key="id" :scrollbar="scrollbar" :pagination="false">
      <template #columns >
        <a-table-column title="编号" data-index="id"></a-table-column>
        <a-table-column title="名称" data-index="name"></a-table-column>
        <a-table-column title="状态" data-index="status">
          <template #cell="{record}">
          <a-tag v-if="record.status == 1" color="green">启用</a-tag>
          <a-tag v-if="record.status == 0" color="red">停用</a-tag>
        </template>
        </a-table-column>
        <a-table-column title="最后操作人" data-index="updateBy"></a-table-column>
        <a-table-column title="最后操作时间" data-index="updateTime"></a-table-column>
        <a-table-column title="操作">
        <template #cell="{record}">
          <a-button type="text" @click="updateClick(record)">修改</a-button>
          <a-button type="text" status="danger" @click="deleteClick(record)">删除</a-button>
        </template>
      </a-table-column>
      </template>


      <!-- 表格底部分页栏 -->
      <template #footer>
          <a-pagination v-model:current="aboutMy.page" :total="aboutMy.total"
                        v-model:page-size="aboutMy.pageSize" @change="getList"
                        @page-size-cahnge="getList"
                        show-total show-jumper show-page-size/>
        </template>
     </a-table>
    </a-space>


    <myForm v-model:visible="visable" v-model:title="title"
             v-model:dto="myDto" v-model:img="MyImg" @ok="getList"/>
  </div>
</template>

<script lang="ts" setup>
import ImgUpload, {type img} from "@/components/ImgUpload/index.vue";
import { delAboutMe, getMyList, type aboutMeQuery, type MyDto, type MyVo } from "@/apis/my/index";
import {ref,reactive} from "vue";
import myForm from "./myForm.vue";
import { useUserStore } from "@/stores";
import { useDict } from "@/hooks/app";
import { Notification } from "@arco-design/web-vue";
// 表格滚动区域
const scroll = {
  x: 600,
  y: 650
};

// 选择的id
const selectList = ref([])

const title =ref("");

// 滚动条状态
const scrollbar = ref(true);
// 弹窗显示状态
const visable = ref(false);

// 后端返回数据存储
const data:Ref<MyVo[]> = ref([])

const MyImg:Ref<img[]> = ref([])


// 点击新增调起面板
const add = ()=>{
  visable.value = true;
  title.value = "新增配置"
}


// 查询类
const aboutMy=reactive({
  // 名字
  name:"",
  // 状态
  status:null,
  // 数据量
  total:0,
  // 页码
  page:1,
  // 页面数据量
  pageSize:10
})


// 删除单个或者删除一堆
const deleteClick = (data:any) =>{

  console.log(data);
  if (data != null && data.id != null){

    delAboutMe([data.id]).then(res => {

      Notification.success({
        title: '删除成功',
        content: 'delete success!',
        duration: 3000,
      })
      getList()

    })

  }else {
    delAboutMe(selectList.value).then(res => {

      Notification.success({
        title: '删除成功',
        content: 'delete success!',
        duration: 3000,
      })
      getList()

    })

  }

}


// 更新配置操作
const updateClick = (data:any) => {
  title.value = '修改配置'
  visable.value = true;

  myDto.value.id = data.id;
  myDto.value.name = data.name;
  myDto.value.description = data.description;
  myDto.value.businessScope = data.businessScope;
  myDto.value.address = data.address;
  myDto.value.phone = data.phone;
  myDto.value.status = data.status;
  myDto.value.updateBy = data.updataBy;
  for (let i = 0; i < data.file.length; i++) {
    MyImg.value.push({
      id: data.file[i].ossId,
      src: import.meta.env.VITE_API_BASE_URL + data.file[i].clientUrl,
      isNow: false
    })
  }

  console.log(data)
};

const getList = () =>{
  getMyList(aboutMy).then(res =>{
    data.value = res.data["data"].records;
    aboutMy.total  = res.data["data"].total;
    let dict = useDict("UTF_8")
  })
}

// 表单数据
// ts对其数据进行约束
const myDto:Ref<MyDto> = ref({
    type:Object,
    default:{
        id:0,
        name:"",
        file:[],
        description:"",
        businessScope:"",
        address:"",
        phone:"",
        status:0,
        updateBy:""
    }
})


getList();
</script>

<style lang="scss" scoped>
.grid {
  .row {
    margin: 0 10px;
  }

  margin: 10px;
  padding: 10px;
  background-color: white;
}
</style>